<template>
	<view class="manage-pages rel" v-if="isLoad">
		<view class="abs manage-bg" :style="{background: `linear-gradient(${primaryColor}, #F5F5F5)`}"></view>
		<view class="flex-center pl-lg pr-lg pt-lg pb-lg rel">
			<image :src="coachInfo.work_img" mode="aspectFill" class="header"></image>
			<view class="flex-1 pl-md">
				<view class="flex-between">
					<text class="f-mini-title c-base">{{coachInfo.name}}</text>
					<!-- <text class="c-base f-caption">服务部（员工）</text> -->
				</view>
				<view class="pt-sm flex-between">
					<!-- <text class="f-paragraph c-base ellipsis max-450">签约：上海龙兵生活服务公司</text> -->
					<text class="f-caption c-base" >已入驻</text>
				</view>
			</view>
		</view>
		<view class="ml-md mr-md radius-18 fill-base pb-lg rel">
			<view class="flex-between pt-lg pl-lg pr-lg">
				<text class="f-ms-title">全部类型</text>
			</view>
			<view class="pt-lg pl-lg pr-lg">
				<view class="flex-center">
					<view class="time-item flex-1 flex-center pl-md pr-md mb-md" @tap.stop="toCheckItem(index, 'date')" 
					:style="{backgroundColor: chooseInd == index ? primaryColor: '', borderColor: chooseInd == index ? primaryColor : '#ddd',color: chooseInd == index ? '#fff' : '#778498'}"
					v-for="(item,index) in dateList" :key="index" :class="[{'ml-md': index > 0}]">{{item.name}}</view>
				</view>
				<view class="flex-center pb-lg pt-lg" style="width: 100%;" v-if="chooseInd == 3">
					<view @tap.stop="toShowTime('start_time')" class="item-child flex-center flex-column flex-1">
						<view>开始时间</view>
						<view class="mt-sm" :style="{color:check_time.start_time ? primaryColor : '#999'}">
							{{check_time.start_time || '选择时间'}}
						</view>
					</view>
					<view @tap.stop="toShowTime('end_time')" class="item-child flex-center flex-column flex-1  b-1px-l">
						<view>结束时间</view>
						<view class="mt-sm" :style="{color:check_time.end_time ? primaryColor : '#999'}">
							{{check_time.end_time || '选择时间'}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex-warp pl-lg pr-lg flex-between">
				<view class="pd-lg fill-body radius-16 mt-md " style="width: calc(50% - 10rpx);"
				 v-for="(item,index) in incomeList" :key="index">
					<view class="f-sm-title">{{orderInfo[item.type]}}</view>
					<view class="flex-y-center">
						<text class="f-caption c-caption">{{item.name}}</text>
						<i class="iconfont iconchangjianwenti c-caption" @tap="changeTips(item.name,item.tips)"></i>
					</view>
				</view>
				<!-- <view class="pd-lg flex-1 fill-body radius-16">
					<view class="f-sm-title">{{orderInfo.sale.today_order_num}}</view>
					<view class="flex-y-center">
						<text class="f-caption c-caption">今日单量</text>
						<i class="iconfont iconchangjianwenti c-caption" @tap="changeTips('今日单量','今日下单量，包含退款')"></i>
					</view>
				</view> -->
			</view>
		</view>
		
		<w-picker mode="date" :startYear="startYear*1-10" :endYear="startYear"
			:value="curDay" :current="false" fields="day"
			@confirm="onConfirm($event)" :disabled-after="false" ref="day" :themeColor="primaryColor"
			:visible.sync="showDate">
		</w-picker>
		<uni-popup ref="show_rule_item" type="center" :maskClick="false">
			<view class="common-popup-content fill-base pd-lg radius-34">
				<view class="title">{{popupObj.title}}</view>
				<view class="f-desc c-title mt-lg">
					{{popupObj.popupContent}}
				</view>
				<view class="button">
					<view @tap.stop="$refs.show_rule_item.close()" class="item-child c-base"
						:style="{background: primaryColor,color:'#fff'}">知道了</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				popupObj: {
					title: '',
					popupContent: ''
				},
				orderInfo: {},
				incomeList: [
					{name: '累计完成（单）',type: 'total',tips: '已服务完成订单总和'},
					{name: '差评数',type: 'fail_count',tips: '服务完成订单的好评数 评论5分才算好评、中评不算好评，1-2分为差评'},
					{name: '好评数',type: 'good_count',tips: '服务完成订单的好评数 评论5分才算好评、中评不算好评'},
					{name: '好评率',type: 'good_ratio',tips: '好评率=好评单量/累计完成订单'}
				],
				dateList: [
					{name: '今日', id: 0, start_time: 0,end_time: 0},
					{name: '近7天', id: 1, start_time: 0,end_time: 0},
					{name: '近30日', id: 2, start_time: 0,end_time: 0},
					{name: '自定义', id: 3}
				],
				chooseInd: 2, // 默认选中近30日
				check_time: {
					start_time: '',
					end_time: ''
				},
				curDay: '',
				showDate: false,
				param: {
					start_time: '',
					end_time: ''
				},
				startYear: '',
				showKey: '',
				isLoad: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			commonOptions: state => state.user.commonOptions,
			userInfo: state => state.user.userInfo,
			coachInfo: state => state.user.coachInfo,
		}),
		onLoad() {
			this.$util.showLoading()
			let cur_time = new Date(Math.ceil(new Date().getTime()))
			this.curDay = this.$util.formatTime(cur_time, 'YY-M-D')
			this.startYear = this.$util.formatTime(cur_time, 'YY')
			let today = this.$util.formatTime(cur_time, 'YY-M-D') + ' 23:59:59'
			let one = 3600 * 24 * 1000
			let time = this.$util.DateToUnix(today) * 1000
			
			this.dateList[0].start_time = this.$util.DateToUnix(this.$util.formatTime(cur_time, 'YY-M-D')) 
			this.dateList[0].end_time = this.$util.DateToUnix(today)
			this.dateList[1].start_time = this.$util.DateToUnix(this.$util.formatTime(time - 6 * one, 'YY-M-D')) 
			this.dateList[1].end_time = this.$util.DateToUnix(today)
			this.dateList[2].start_time = this.$util.DateToUnix(this.$util.formatTime(time - 29 * one, 'YY-M-D')) 
			this.dateList[2].end_time = this.$util.DateToUnix(today)
			
			this.param.start_time = this.$util.DateToUnix(this.$util.formatTime(time - 29 * one, 'YY-M-D'))
			this.param.end_time = this.$util.DateToUnix(today)
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		methods: {
			...mapActions(['getConfigInfo', 'getCoachInfo']),
			async initIndex(refresh = false) {
				// #ifdef H5
				if (!refresh && this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					this.$jweixin.wxReady(() => {
						this.$jweixin.hideOptionMenu()
					})
				}
				// #endif
				if(!this.configInfo.id || refresh){
					await this.getConfigInfo()
				}
				if(!this.coachInfo.id || refresh){
					await this.getCoachInfo()
				}
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.getOrderCount()
			},
			initRefresh(){
				this.initIndex(true)
			},
			async getOrderCount(){
				let data = await this.$api.home.orderCount(this.param)
				this.orderInfo = data
				this.$util.hideAll()
				this.isLoad = true
			},
			changeDate(index){
				this.dateCurrent = index
				this.getOrderCount()
			},
			changeTips(title,tips){
				this.popupObj = {
					title,
					popupContent: tips
				}
				this.$refs.show_rule_item.open()
			},
			toCheckItem(val , type){
				this.chooseInd = val
				let {
					start_time = 0,
					end_time = 0
				} = this.dateList[val]
				if(this.check_time.start_time && this.check_time.end_time && val == 3){
					this.param.start_time = this.$util.DateToUnix(this.check_time.start_time + ' 00:00:00')
					this.param.end_time = this.$util.DateToUnix(this.check_time.end_time + ' 23:59:59')
					this.$util.showLoading()
					this.getOrderCount()
				}
				if(val != 3){
					this.$util.showLoading()
					this.param.start_time = start_time
					this.param.end_time = end_time
					this.getOrderCount()
				}
				
				// this.check_time = {
				// 	start_time: '',
				// 	end_time: ''
				// }
			},
			toShowTime(key) {
				if (key == 'end_time' && !this.check_time.start_time) {
					this.$util.showToast({
						title: `请选择开始时间`
					})
					return
				}
				let showTime = this.check_time[key]
				if (showTime) {
					this.curDay = showTime
				}
				
				this.showKey = key
				this.showDate = true
			},
			async onConfirm(val) {
				let {
					start_time,
					end_time
				} = this.check_time
				let {
					showKey
				} = this
				let show_unit = this.$util.DateToUnix(showKey == 'month' ? `${val.result}-01` : val.result)
				let start_unit = start_time ? this.$util.DateToUnix(start_time) : 0
				let end_unit = end_time ? this.$util.DateToUnix(end_time) : 0
				let cur_month = this.$util.formatTime(new Date(Math.ceil(new Date().getTime())), 'YY-M-D')
				let cur_unit = this.$util.DateToUnix(cur_month) + 1
			
				let msgType = {
					month: '开始月份',
					start_time: '开始时间',
					end_time: '结束时间',
				}
			
				if (show_unit > cur_unit) {
					this.$util.showToast({
						title: `${msgType[showKey]}不能选择未来时间哦`
					})
					return
				}
			
				if (((showKey == 'start_time' && end_unit && end_unit < this.$util.DateToUnix(val
							.result)) ||
						(showKey == 'end_time' && start_unit && start_unit > this.$util.DateToUnix(val.result)))) {
					this.$util.showToast({
						title: `结束时间不能小于开始时间`
					})
					return
				}
				console.log(val)
				this.check_time[showKey] = val.result
				// if(showKey == 'end_time'){
				// 	this.chooseInd = -1
				// }
				if(this.check_time.start_time && this.check_time.end_time){
					this.param.start_time = this.$util.DateToUnix(this.check_time.start_time + ' 00:00:00')
					this.param.end_time = this.$util.DateToUnix(this.check_time.end_time + ' 23:59:59')
					this.$util.showLoading()
					this.getOrderCount()
				}
			},
		}
	}
</script>

<style lang="scss">
	.manage-bg{
		height: 300rpx;
		width: 100%;
	}
	.switch-date{
		border-radius: 55rpx;
		background-color: #F2F2F2;
		padding: 4rpx;
		.switch-date-text{
			padding: 0 15rpx;
			height: 52rpx;
			border-radius: 52rpx;
		}
	}
	.income{
		padding: 40rpx 0;
	}
	.iconchangjianwenti{
		font-size: 13px;
	}
	.cancel-auth {
		width: 110rpx;
		height: 100rpx;
		font-size: 100rpx;
		top: 220rpx;
		right: 0rpx;
	
		.text-bold {
			height: 26rpx;
			transform: rotate(-32deg);
		}
	}
	
	.header{
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
	}
	
	.time-item{
		height: 60rpx;
		border-radius: 60rpx;
		color: #778498;
		border: 1px solid #DDDDDD;
	}
</style>